<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%
    String path = request.getContextPath();
 %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <br/>
    <br/>
    <br/>
    <br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type= "button" value="ajax从后台获取数据" onclick="search()"/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    姓名：<input type= "text" value="" id="studentName"/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    身高：<input type= "text" value="" id="studentHeight"/><br/>
    <script type="text/javascript" src="<%=path%>/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        function search(){
           // getOrignAjax();
           $.ajax({
                type:"post",   //请求方式
                url:"<%=path%>/student/getStudent.do",  //请求地址
                data:{id:123},  //请求参数
                success:function(res){   //请求成功返回的数据
                    console.log(res);
                    $('#studentName').val(res.name);
                    $('#studentHeight').val(res.height);
                },
                error:function(e){    //请求失败放回的数据
                    console.log(e)
                }

           })
        }
        function getOrignAjax(){
            // 第一步：创建一个xhr对象(你可以称呼它为小黄人)
            let xhr = null
            if (window.XMLHttpRequest) {
            　　//Firefox、 Opera、 IE7 和其它浏览器使用本地 JavaScript 对象
               xhr = new XMLHttpRequest();
            } else {
            　　//IE 5 和 IE 6 使用 ActiveX 控件
               var request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 第二步：打开请求地址，初始化数据
            xhr.open("POST", "<%=path%>/student/getStudent.do", true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // 第三步：发送请求数据
            xhr.send("id=23")
            // 第四步：监听回调函数状态
            xhr.onreadystatechange = function(){
            　　if(xhr.readyState === 4 && xhr.status === 200){
               　　// 收到服务器返回的应答结果
               　　console.log(xhr.responseText)
               }
            }
        }
    </script>
</body>
</html>